<!-- 
  v-on:click
  
  1. 带有参数的方法，不传是 event(浏览器的)
  2. 调用方法 传递参数，并把 浏览器的event传递过去，需要写 $event
 -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 1. btnClick后面可以不加小括号，都可以，可以省略 -->
    <button @click='btnClick()'>按钮1</button> <br />
    <button @click='btnClick'>按钮1-省略括号</button> <br />

    <hr />
    <!-- 2. 在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的 -->
    <button @click="btn2Click(123)">按钮2-传参</button> <br />
    <button @click="btn2Click">按钮2-不传参数</button> <br />

    <hr />
    <!-- 3. 方法定义时，我们需要event对象，同时又需要其他参数 -->
    <button @click="btn3Click">按钮3</button> <br />
    <button @click="btn3Click('add12')">按钮3-参数</button> <br />
    <button @click="btn3Click('add12', $event)">按钮3-event</button>
    <!-- 在调用方式，如果手动的获取到浏览器参数的event对象：$event -->

  </div>

  <script src="../../js//vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        btnClick() {
          console.log('btnClick');
        },
        btn2Click(abc) { //有值就是该值，没有值，默认 MoustEvent
          console.log('btn2Click=> ', abc)
        },
        btn3Click(abc, event) { //有值就是该值，没有值，默认 MoustEvent
          console.log('btn3Click=> ', abc ,event)
        }
      }
    })
  </script>
</body>
</html>